<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="zh-CN">
    <meta content="1 days" name="revisit-after" />
    <meta name="robots" content="all">
    <meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="false" id="twcClient" name="twcClient" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/common.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/swiper.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>看眼睛</title>
</head>

<body>
    <div id="index">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"  v-for="banner in banners">
                    <img :src="banner.cover_pic+'/750'" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="trement">
            <div class="title">我们的医疗</div>
            <ul class="list list1" v-if="proList">
                <li v-for="(item,idx) in proList" :data-id="item.target_id" :data-model="item.model" @click.stop="goPro(item.target_id,item.model)">
                    <div class="pic">
                        <img :src="item.cover_pic+'/750'" alt="">
                    </div>
                    <div class="desc">
                        <div class="left">
                           {{item.summary}}
                        </div>
                        <div class="right"></div>
                    </div>
                </li>
            </ul>
            <div class="title">爱仁医生举荐</div>
            <ul class="list">
                <li  @click.stop="goRecomm">
                    <div class="pic">
                        <img src="images/comm.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom">
        </div>
    </div>
</body>
</html>
<script>

    var app4 = new Vue({
        el: '#index',
        data() {
            return {
              banners:'',
              proList:'',
              SetFun:'',
              swiper:''
            };
        },
        methods: {
            getBanner(){
                var _self = this;
                axios.get('http://airen.2020-2020.com/v1/positions/153')
                .then(function(response){
                _self.banners = response.data.data.items;
                _self.$nextTick(function(){
                    _self.swiper= new Swiper('.swiper-container', {
                    autoplay: true,
                    loop:true,
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,
                    speed:300,
                    autoplay: {
                    delay: 2000,
                    disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },

            }); 
                })
                })
                .catch(function (error) {
                    console.log(error);
                });

            },
            getPro(){
                var _self = this;
                axios.get('http://airen.2020-2020.com/v1/positions/154')
                .then(function(response){
                _self.proList = response.data.data.items;
                console.log(_self.proList );

                })
            },
            goPro(id,model){
              var endModel 
              if(model=='Hospital'){
                endModel = 'hospitals';
              }else if(model=='Doctor'){
                endModel = 'doctors';
              }
              location.href ="doctor.html?id="+id+"&model="+endModel;
            },
            goRecomm(){
                location.href ="recomm.html";
            }
        },
        created() {
           
        },
        mounted() {
            var _self = this;
            this.SetFun = new window.SetFun();
            this.getBanner();
            this.getPro();
            this.SetFun.goShare(false,{
                desc:'聚合靠谱专家，配备最好设备，抛弃繁文缛节的程序，用最少花费，一步到位。'
            })
        },
    })
</script>